<template>
    <view class="container">
        <uni-section title="品牌/型号" subTitle="品牌/型号" type="line" class="search">
            <uni-search-bar placeholder="品牌/型号" v-model="searchValue" @confirm="keySearch"  @cancel="cancelSearch"/>
        </uni-section>

<!--        <scroll-view class="goods-class" scroll-x="true">-->
<!--            <template v-for="(item, index) in classList">-->
<!--                <view class="goods-class-item" :class="{ active: item.id==classActiveId }"-->
<!--                      @click="classClick(item.id,index)">{{item.goodsClassName}}</view>-->
<!--            </template>-->
<!--        </scroll-view>-->
        <view class="goods-box" :style="{'height':scrollHeight+'px'}">
            <view class="box-left">
                <scroll-view class="brand" scroll-y="true">
                    <template v-for="(item, index) in classList">
                        <view class="brand-item" :class="{ active: item.id===classActiveId }"
                              @click="classClick(item.id,index)">{{item.goodsClassName}}</view>
                    </template>
                    <view style="height:80px;"></view>
                </scroll-view>
            </view>
            <view class="box-right">
                <scroll-view class="goods-list" scroll-y="true">
                    <view class="goods-container">
                        <view v-if="brandList.length>0">
                            <view class="divider">
                                <text>品牌</text>
                            </view>

                            <view class="list">
                                <view class="goods" v-for="item in brandList" @click="Common.toUrl('/pages/mall/GoodsList?goodsClassId='+classActiveId+'&brandId='+item.id)">
                                    <view class="img">
                                        <image mode="aspectFit" :src="item.logo"></image>
                                    </view>
                                    <view class="title">
                                        <text :selectable="true" :user-select="true">{{ item.brandName }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>


                        <view class="list">
                            <view class="goods" v-for="item in childrenClassList" @click="Common.toUrl('/pages/mall/GoodsList?goodsClassId='+item.id)">
                                <view class="img">
                                    <image mode="aspectFit"
                                           :src="item.image"></image>
                                </view>
                                <view class="title">
                                    <text :selectable="true" :user-select="true">{{ item.goodsClassName }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>

import { ClassApi } from '@/api/food/ClassApi'

export default {
    data() {
        return {
            Config: this.$Config,
            Common: this.$Common,
            Auth: this.$Auth,
            ShareUtil: this.$ShareUtil,
            State: this.$store.state,
			Dict: this.$Dict,

            scrollHeight: 0,
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            classList: [],
            classActiveId: "",

            brandList: [],
            childrenClassList:[],

            searchValue: '',
            triggered: false,
            status: 'more'
        }
    },
    onShow() {

    },
    onLoad() {
        let headerHeight = 44

        //#ifdef MP-WEIXIN
        headerHeight = 0
        //#endif

        this.scrollHeight = uni.getWindowInfo().windowHeight - headerHeight - 56 - 40 - 15 - 8

        this.getGoodsClassList()
        this.classClick(0)
    },

    methods: {
        classClick(id) {
            ClassApi.getClassBrandList(id).then((response)=>{
                this.brandList = response.brandList
                this.childrenClassList = response.goodsClassList
                this.classActiveId = id
            })
        },

        keySearch() {
            if (this.searchValue == '') {
                return
            }

            uni.navigateTo({
                url: '/pages/index/yi_heng/SearchGoods?keyword='+this.searchValue
            });
        },

        getGoodsClassList() {
            ClassApi.getGoodsClassList(0).then((response) => {
                let arr = [{
                    "id": 0,
                    "goodsClassName": "全部"
                }];
                this.classList = arr.concat(response)
            })
        }

    }
}
</script>

<style lang="scss" scoped>
page{background-color: #FFFFFF;}

.search {
    height: 56px
}

.uni-searchbar {
    padding: 24rpx !important;
}

::v-deep .uni-searchbar__box {
    border-radius: 38rpx !important;
}

.goods-box {
    display: flex;
    margin-top: 15px;
}

.goods-box .box-left {
    width: 154rpx;
}

.goods-box .box-right {
    width: 596rpx;
}

.brand {
    white-space: nowrap;
    height: 100%;
    background-color: #F7F8FA;
}

.brand .brand-item {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
}

.brand .active {
    background-color: #FFF;
    border-left: 4px solid #005DFF;
}

.goods-list {
    width: 100%;
    height: 100%;
    border: solid #EEE;
    border-width: 0px 1px 0 0;
    padding: 0 13px 10px 15px;
}

.goods-list .goods-container {
    margin-top: 16rpx;
}


.goods-list .divider {
    border-bottom: 1px solid #D1D1D1;
    position: relative;
    height: 20rpx;
    text-align: center;
    margin: 0 20rpx 0 20rpx;
}

.goods-list .divider text {
    background-color: #FFFFFF;
    padding: 2rpx 20rpx;
}

.goods-list .list {
    display: flex;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 78rpx;
}

.goods-list .list .goods {
    width: 28%;
    margin-right: 8%;
    margin-bottom: 8%;
}

.goods-list .list .goods:nth-child(3n) {
    margin-right: 0px;
}

.goods-list .list .goods .img {
    width: 100%;
    height: 130rpx;
}

.goods-list .list .goods .img image {
    width: 100%;
    height: 100%;
}

.goods-list .list .goods .title {
    word-break: break-all;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 16rpx;
    font-size: 22rpx;

}
</style>
